<template>
  <el-dialog :title="dataForm.id? $t('versionDeloy.versionCreate'): $t('versionDeloy.versionCreate')"
             :visible.sync="visible">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">
      <!-- 名称 -->
      <el-form-item label="版本名称"  prop="name">
        <el-input v-model="dataForm.name"/>
      </el-form-item>
      <el-form-item label="系统类型" prop="type">
        <el-select v-model="dataForm.type" placeholder="请选择系统类型">
          <el-option label="安卓" :value="1"></el-option>
          <el-option label="苹果" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 简介 -->
      <el-form-item label="版本简介"  prop="detail">
        <tiny-mce
          ref="tinyMce"
          v-model="dataForm.detail"
          :key="tinymceFlag"
        ></tiny-mce>
      </el-form-item>
      <!-- 版本 -->
      <el-form-item label="版本"  prop="version">
        <el-input v-model="dataForm.version"/>
      </el-form-item>
      <el-form-item label="wgt"  prop="wgt">
        <el-input v-model="dataForm.wgt"/>
      </el-form-item>
      <!-- wgt上传 -->
      <!--      <el-form-item label="wgt上传" prop="wgt">-->
      <!--        <el-input v-model="dataForm.wgt" disabled/>-->
      <!--        <JeepayUpload-->
      <!--          :action="certAction"-->
      <!--          :file-url="dataForm.wgt"-->
      <!--          @uploadSuccess="uploadSuccess($event, 'wgt')"-->
      <!--        >-->
      <!--          <template slot="uploadSlot" slot-scope="{loading}">-->
      <!--            <a-button>-->
      <!--              <a-icon :type="loading ? 'loading' : 'upload'"/>-->
      <!--              {{ dataForm.wgt == '' ? (loading ? '正在上传' : '点击上传') : '重新上传' }}-->
      <!--            </a-button>-->
      <!--          </template>-->
      <!--        </JeepayUpload>-->
      <!--      </el-form-item>-->

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        {{ this.$t('webInfoConfig.cancellation') }}
      </el-button>
      <el-button type="primary" @click="dataFormSubmit()">
        {{ this.$t('webInfoConfig.determine') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import TinyMce from "@/components/tiny-mce/index.vue";

export default {
  components: {TinyMce},
  data () {
    return {
      noticeOptions: [],
      visible: false,
      tinymceFlag: new Date() + 1,
      dataForm: {
        id: null,
        detail: '',
        name: '',
        type: '',
        version: '',
        wgt: ''
      },
      relatedSpu: 0,
      prodSelectVisible: false,
      prods: {},
      rules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}, {max: 20, message: '名称长度不能超过20位'}],
        detail: [{required: true, message: '简介不能为空', trigger: 'blur'}, {
          max: 200,
          message: '简介长度不能超过200位'
        }],
        version: [{required: true, message: '版本不能为空', trigger: 'blur'}],
        type: [{required: true, message: '系统类型不能为空', trigger: 'blur'}],
        wgt: [{required: true, message: '请选择wgt', trigger: 'change'}]
      }
    }
  },

  methods: {
    init (imgId) {
      this.visible = true
      this.dataForm.id = imgId || 0
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$refs.tinyMce.setContent()
        if (!this.dataForm.id) {
          return
        }
        api.get(imgId).then(data => {
          this.dataForm = data
        })
      })
    },

    closeDialog () {
      this.dataForm = {
        id: null,
        detail: '',
        name: '',
        version: '',
        wgt: ''
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.$http({
        url: this.$http.adornUrl('/version/saveVersion'),
        method: this.dataForm.balanceId ? 'put' : 'post',
        data: this.$http.adornData(this.dataForm)
      }).then(({data}) => {
        this.$message({
          message: this.$i18n.t('remindPop.succeeded'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.visible = false
            this.isSubmit = false
            this.$emit('refreshDataList')
          }
        })
      })
    },
    uploadSuccess (value, name) {
      this.dataForm.wgt = '/' + value
      this.$message.success('上传成功!')
    },
    // keep-alive缓存的缘故 需调用钩子函数 设置key值不然编辑器无法使用
    activated () {
      this.tinymceFlag = new Date() + 1
    }
  }
}
</script>
